Recipe Box — A Recipe Organzing App

Summary

Recipe Box is an app to help users organize their recipes, get their macros, get new ideas, and share with friends. The app’s ultimate purpose is organization of recipes, specifically for anyone who likes to cook and meal prep. Though the limitations would not end there and could be used for anyone looking for inspiration, learning to cook, or get nutritional information.

Key Challenge

Recipe Box needs to create a recipe management app that allows users to create, and share recipes with ease.

Role

Product Designer

• User Research
• Interaction
• Visual Design
• Prototyping
• Testing

Target

Home cooks

Research

I started researching with interviews from a focus group. I asked people who are both professional and normal home cooks:

• Do you Consider yourself a Food Enthusiast?
• Do you use recipes, why or why not?
• How do you save recipes that you like?

Pain Points

• Recipe yield increases can be difficult to calculate with lots of ingredients
• Keeping track of nutrition can be a hassle with all the nutrient information, calorie intake, protein and carbs
• Finding substitutes and where you can buy those substitutes

Competitive Audit

I looked at similar apps, and although they offer recipe management, they focused heavily on other goals or do not offer the extensive recipe management abilities. I want to create this app so the recipe’s come first. I feel this way creating recipes would be easier in comparison to other apps.

Personas

Leslie

Leslie loves her job and is a very organized person. Her organization allows her to get a lot done. She finds that recipes are a great way to keep consistency, but has a hard time making sure she is eating properly and finding substitutes either for dietary reasons or because of allergy concerns.

Goals

• Wants to keep recipes in one location
• Wants to easily understand nutritional information

Frustrations

• Not having recipes easily accessible
• Not being able to find substitutes

Demitree

Demitree is a smart guy who learns fast. His goal in life is to be a concept artist, but falls on being a graphic designer in order to make money. Another goal that he is also focused on is staying in shape and building muscle mass. He understands working out, but nutrition can be more difficult.

Goals

• Wants to keep track of protein intake
• Working on bulking then cutting

Frustrations

• Not being able to get enough protein in a day
• Recipe suggestions not personal

Insight

A need to understand the nutritional breakdown of recipes is very important among users. Although creating a place to store recipes is the primary goal, a well read nutritional page is also going to be important to users.

The product is designed to store and create recipes so they are easy to access, but also provide a way to increase or decrease the yield results, serving size, and nutritional information. The main page would be a feed that would inspire the user to take recipes that have been shared with the public and make it their own. It also would encourage the user to dive in and create a recipe of their own. The colors of the design would give fresh food vibes with vibrant greens and oranges to promote an environment of health first.

Usability Study

When testing the users, I have supervised them in these tests to see if there were expectations that I did not expect. Also to see if some of the UI met the experience I was hoping for since I was trying a few things that felt new to me.

Questions and Tasks

• What would you click to create a new recipe?

  • Would that be the process you normally take?
• Are the icons easily readable?

• How would you see the nutritional information of a recipe you created?

  • Is there something you would like to see that would make it easier for organizing or creating recipes?

Results

A mistake I had made was trying to create a lot more variation of pages than I needed to. For each saved recipe, I had tried to make an example of what it would look like. During the testing, I realized I couldn’t test all the features and needed to focus on testing one feature at a time before moving onto the next. I should have focused on creating recipes, organization, and nutritional information.

This is something I had corrected moving onto the hi-fi prototype. I’ve also added color to the hi-fi design to convey the vibe of a healthy environment and goals. I’ve included more animations to give a better feel of how the app would move and feel.

Mock Ups

Prototyping helped me find a few issues I did not want to carry over to a hi-fi prototype. One thing that was noted to me was the users expected to see an edit button. Managing a recipe would be pointless if you could not edit the recipe itself.

Another point a user had made was there was no feedback when an action was made. Going forward, I would use animations in the lofi prototype only to show user feedback and focus less on creating more pages. I would keep the animations simple and refine those for the h-fi prototype.

Accessibility

I really wanted to focus on the sandwich menu with icons that made sense. However this will cause an accessibility issue if someone does not understand the icons. To counter this, I think a web based application would be helpful and accessibility options at initial setup of the application.

Take Away

Going through the user testing on the mock ups allowed me to see the importance of user feedback. For a lo-fi prototype, it isn’t necessary to create all the pages, but the key features needed to get a better idea of what the application offers.

The process in testing and designing and refining allowed me to learn how I can make future tests easier for the user, to keep accessibility in mind, and not to worry too much about the next step.

Final Design

Next Steps

My next steps would be to create and test the design for the key features such as an overview page of the recipes, nutrition page, and sharing recipes. I would also like to see a dark mode and how this design would translate into a web application.